/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-01-12 16:34:23
 * @LastEditTime: 2023-03-16 18:46:53
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Button, Container, Flex, Text } from '@chakra-ui/react';
import { useNavigate } from 'react-router-dom';

const NotFound = () => {
  const navigate = useNavigate();

  return (
    <Flex
      minH="100vh"
      flexDirection="column"
      align="center"
      justify="center"
    >
      <Container>
        <Text fontSize="4xl" color="gray.700" fontWeight="600" align="center">
          404
        </Text>

        <Flex mt="100px" justify="center">
          <Button
            bg="base.950"
            _hover={{
              bg: 'base.900',
            }}
            color="base.300"
            onClick={() => navigate('/', { replace: true })}
          >
            返回首页
          </Button>
        </Flex>
      </Container>
    </Flex>
  );
};

export default NotFound;
